import React from 'react'
import Component, { mapStateToProps, mapDispatchToProps } from '@components/Component'
import { connect } from 'react-redux'
import { Form, Row, Col, Button, Table, message, Input, Select } from 'antd'
import style from '@pages/filingCaseManage/CaseManage.module.less'
import { getColumns } from './util'
import EditModal from './EditModal'
import DetailModal from './DetailModal'
const { Item } = Form
const layout = {
  labelCol: { flex: '100px' }
}

class SecretaryStatistic extends Component {
  state = {
    dictionaries: {},
    causeActions: [],
    list: [],
    loading: false,
    orderField: '',
    order: '',
    modifyData: null,
    plist: [],
    visible: false,
    detailVisible: false
  }

  formRef = React.createRef()

  // 格式化枚举字典
  formatDictionaries (dictionaries = []) {
    const result = {}
    dictionaries.forEach(d => {
      result[d.type] = d.list
    })
    return result
  }

  // 格式化表单数据
  formatParams (form) {
    form = form || this.formRef.current.getFieldsValue()
    const params = { }
    const condition = []
    if (form.name) {
      condition.push({ k: 'name', o: 'like', v: `%${form.name}%` })
    }
    if (form.pid) {
      condition.push({ k: 'pid', o: '=', v: form.pid })
    }
    params.condition = JSON.stringify(condition)
    return params
  }

  // 获取表格数据
  getTableData (form) {
    this.setState({ loading: true })
    this.$get('/api/mgt/institution/getSubInstitutionIndex', this.formatParams(form))
      .then(res => {
        this.setState({ loading: false })
        if (res.status !== 1) {
          return message.warning(res.message)
        }
        this.setState({
          list: res.data.map((li, i) => {
            li.key = i + 1
            return li
          })
        })
      }).catch(() => this.setState({ loading: false }))
  }

  getPlist () {
    this.$get('/api/mgt/institutionstat')
      .then(res => {
        if (res.status !== 1) {
          return message.warning(res.message)
        }
        this.setState({
          plist: res.data.map((li, i) => {
            return {
              label: li.name,
              value: li.id
            }
          })
        })
      })
  }

  // 表格请求变化
  tableChange (pagination, filters, sorter) {
    this.setState({
      orderField: sorter.field,
      order: sorter.order
    }, () => {
      this.getTableData()
    })
  }

  componentDidMount () {
    this.getTableData()
    this.getPlist()
  }

  render () {
    return (
      <div className={style.container}>
        <div className={style['title-line']}>
          <span>{this.props.title}</span>
        </div>
        <div className={style['search-container']}>
          <div className={style['search-form']}>
            <Form name='my_case_manage' {...layout} ref={this.formRef} onFinish={v => this.getTableData(v)}>
              <Row gutter={24}>
                <Col span={8}>
                  <Item label='名称' name='name'>
                    <Input placeholder='请输入' allowClear />
                  </Item>
                </Col>
                <Col span={8}>
                  <Item label='所属机构' name='pid'>
                    <Select placeholder='请选择' options={this.state.plist} allowClear />
                  </Item>
                </Col>
                <Col span={8}>
                  <Item>
                    <div className={style['search-btns']}>
                      <Button type='primary' ghost htmlType='submit'>搜索</Button>
                      <Button htmlType='reset' onClick={() => { setTimeout(() => { this.formRef.current.submit() }, 0) }}>重置</Button>
                    </div>
                  </Item>
                </Col>
              </Row>
            </Form>
          </div>
        </div>
        <div className={style['table-container']}>
          <Table loading={this.state.loading} columns={getColumns.call(this)} dataSource={this.state.list} pagination={false} onChange={(...args) => this.tableChange(...args)} />
        </div>
        <EditModal data={this.state.modifyData} visible={this.state.visible} hide={() => this.setState({ visible: false })} refreshFn={() => this.getTableData()} />
        <DetailModal visible={this.state.detailVisible} data={this.state.modifyData} hide={() => this.setState({ detailVisible: false })} />
      </div>
    )
  }
}

const mapState = mapStateToProps(function (state) {
  return {

  }
})

const mapDispatch = mapDispatchToProps(function (dispatch) {
  return {

  }
})

export default connect(mapState, mapDispatch)(SecretaryStatistic)
